<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ECharts初体验</title>
  </head>
  <body>
    <!-- 2.定义一个有高宽的div容器 -->
    <div id="main" style="width: 600px; height: 400px"></div>
    <!-- 1.引入echarts文件 -->
    <script src="./dist/echarts.js"></script>
    <!-- 实例化echarts -->
    <script>
      // 3.实例化一个echart
      const myChart = echarts.init(document.querySelector("#main"))
      //   4.调用实例的方法 setOption(设置选项的意思) setOption(对象)
      // 指定图表的配置项和数据
      let option = {
        // 标题选项
        title: {
          text: "145期顺义前端学员实际工资表",
          subtext: "薪资表",
          show: true, // 不显示标题
          textStyle: {
            // color: "red",
            textBorderColor: "pink",
          },
        },

        // 图例选项
        legend: {
          left: "right", // 让图例居右
          itemStyle: {
            // color: "pink",
          },
          data: ["销量"],
        },
        // 设置x坐标轴
        xAxis: {
          type: "category", // 只要设置了数据就可以
          data: ["薛磊", "梁凤", "田利玲", "张浩", "高云飞", "安琪", "吴心如", "周子龙", "高兆兴"],
        },
        tooltip: {},
        // 度量单位
        yAxis: {
          // data: [100, 200, 300, 400, 500],
        },
        color: ["#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],

        series: [
          {
            name: "期望薪资",
            type: "line", // 表示柱状图
            data: [1000, 15000, 6000, 5000, 18000, 18000, 18000, 18000, 800],
            smooth: true,
            lineStyle: {
              width: 4,
              // color: "blue",
            },
          },
          {
            name: "实际薪资",
            type: "line",
            data: [2000, 5000, 600, 5000, 1800, 8000, 9000, 10000, 800],
            smooth: true,
            lineStyle: {
              width: 4,
              // color: "red",
              type: "dotted",
            },
          },
        ],
      }
      myChart.setOption(option) // 设置选项
    </script>
  </body>
</html>
